import ArkCard from '../ark-card/ArkCard.vue';

export default {
  title: 'base-component-v1/ArkCard',
  component: ArkCard,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、tailwindcss</span> 使用`
      }
    }
  },
  argTypes: {
    dark: {description: '深色'},
    shadow: {description: '阴影'},
    blur: {description: '模糊'},
    hover: {description: '鼠标移入'},
    active: {description: '鼠标点击'},
    disabled: {description: '禁用'},
    title: {description: '标题'},
    desc: {description: '描述'},
    default: {description: '整个下部分'}
  }
};

const GRAY_BG = {
  style: 'background-image: linear-gradient(144deg, rgba(192, 192, 192, 0.03) 0%, rgba(192, 192, 192, 0.03) 23%,rgba(36, 36, 36, 0.03) 23%, rgba(36, 36, 36, 0.03) 29%,rgba(248, 248, 248, 0.03) 29%, rgba(248, 248, 248, 0.03) 44%,rgba(250, 250, 250, 0.03) 44%, rgba(250, 250, 250, 0.03) 61%,rgba(36, 36, 36, 0.03) 61%, rgba(36, 36, 36, 0.03) 100%),linear-gradient(200deg, rgba(81, 81, 81, 0.03) 0%, rgba(81, 81, 81, 0.03) 68%,rgba(36, 36, 36, 0.03) 68%, rgba(36, 36, 36, 0.03) 82%,rgba(187, 187, 187, 0.03) 82%, rgba(187, 187, 187, 0.03) 95%,rgba(13, 13, 13, 0.03) 95%, rgba(13, 13, 13, 0.03) 97%,rgba(107, 107, 107, 0.03) 97%, rgba(107, 107, 107, 0.03) 100%),linear-gradient(228deg, rgba(248, 248, 248, 0.03) 0%, rgba(248, 248, 248, 0.03) 25%,rgba(125, 125, 125, 0.03) 25%, rgba(125, 125, 125, 0.03) 28%,rgba(228, 228, 228, 0.03) 28%, rgba(228, 228, 228, 0.03) 32%,rgba(185, 185, 185, 0.03) 32%, rgba(185, 185, 185, 0.03) 84%,rgba(82, 82, 82, 0.03) 84%, rgba(82, 82, 82, 0.03) 100%),linear-gradient(244deg, rgba(15, 15, 15, 0.03) 0%, rgba(15, 15, 15, 0.03) 35%,rgba(224, 224, 224, 0.03) 35%, rgba(224, 224, 224, 0.03) 52%,rgba(251, 251, 251, 0.03) 52%, rgba(251, 251, 251, 0.03) 69%,rgba(83, 83, 83, 0.03) 69%, rgba(83, 83, 83, 0.03) 72%,rgba(219, 219, 219, 0.03) 72%, rgba(219, 219, 219, 0.03) 100%),linear-gradient(338deg, rgba(57, 57, 57, 0.03) 0%, rgba(57, 57, 57, 0.03) 32%,rgba(166, 166, 166, 0.03) 32%, rgba(166, 166, 166, 0.03) 54%,rgba(161, 161, 161, 0.03) 54%, rgba(161, 161, 161, 0.03) 56%,rgba(158, 158, 158, 0.03) 56%, rgba(158, 158, 158, 0.03) 61%,rgba(25, 25, 25, 0.03) 61%, rgba(25, 25, 25, 0.03) 100%),linear-gradient(90deg, rgb(225, 225, 225),rgb(231, 231, 231));',
  icon: 'icon-xitongguanli',
};
export const GrayBg = {
  name: '灰色背景',
  render: (args) => ({
    components: {ArkCard},
    setup() {
      return {args, GRAY_BG};
    },
    template: `
      <ArkCard v-bind="args" style="height: 200px;width: 200px" :style="GRAY_BG.style">
        <div style="display: flex;justify-content: center;align-items: center;height: 100%">
          <i class="iconfont" :class="GRAY_BG.icon" style="font-size: 35px"></i>
        </div>
      </ArkCard>`,
  }),
  args: {
    dark: false,
    shadow: true,
    blur: true,
    hover: true,
    active: true,
    disabled: false,
    title: '通用管理',
    desc: '校园基础管理',
  }
};

const LIGHT_BLUE_BG = {
  style: 'background: linear-gradient(90deg, rgba(219, 234, 254, 1) 0%, rgba(96, 165, 250, 1) 100%)',
  icon: 'icon-ziyuanxhdpi',
};
export const LightBlueBg = {
  name: '浅蓝色背景',
  render: (args) => ({
    components: {ArkCard},
    setup() {
      return {args, LIGHT_BLUE_BG};
    },
    template: `
      <ArkCard v-bind="args" style="height: 200px;width: 200px" :style="LIGHT_BLUE_BG.style">
        <div style="display: flex;justify-content: center;align-items: center;height: 100%">
          <i class="iconfont" :class="LIGHT_BLUE_BG.icon" style="font-size: 35px"></i>
        </div>
      </ArkCard>`,
  }),
  args: {
    dark: false,
    shadow: true,
    blur: true,
    hover: true,
    active: true,
    disabled: true,
    title: '设备地图',
    desc: '设备可视化操控',
  }
};

const DARK_BLUE_BG = {
  style: 'background-image: linear-gradient(329deg, rgba(250, 250, 250,0.06) 0%, rgba(250, 250, 250,0.06) 50%,rgba(91, 91, 91,0.06) 50%, rgba(91, 91, 91,0.06) 100%),linear-gradient(137deg, rgba(192, 192, 192,0.06) 0%, rgba(192, 192, 192,0.06) 50%,rgba(150, 150, 150,0.06) 50%, rgba(150, 150, 150,0.06) 100%),linear-gradient(321deg, rgba(28, 28, 28,0.06) 0%, rgba(28, 28, 28,0.06) 50%,rgba(134, 134, 134,0.06) 50%, rgba(134, 134, 134,0.06) 100%),linear-gradient(325deg, rgba(135, 135, 135,0.06) 0%, rgba(135, 135, 135,0.06) 50%,rgba(221, 221, 221,0.06) 50%, rgba(221, 221, 221,0.06) 100%),linear-gradient(51deg, rgba(105, 105, 105,0.06) 0%, rgba(105, 105, 105,0.06) 50%,rgba(185, 185, 185,0.06) 50%, rgba(185, 185, 185,0.06) 100%),linear-gradient(272deg, rgba(156, 156, 156,0.06) 0%, rgba(156, 156, 156,0.06) 50%,rgba(199, 199, 199,0.06) 50%, rgba(199, 199, 199,0.06) 100%),radial-gradient(circle at center center, rgb(137, 146, 224) 0%,rgb(17, 77, 203) 58%);',
  icon: 'icon-navicon-dphf',
};
export const DarkBlueBg = {
  name: '深蓝色背景',
  render: (args) => ({
    components: {ArkCard},
    setup() {
      return {args, DARK_BLUE_BG};
    },
    template: `
      <ArkCard v-bind="args" style="height: 200px;width: 200px" :style="DARK_BLUE_BG.style">
        <div style="display: flex;justify-content: center;align-items: center;height: 100%">
          <i class="iconfont" :class="DARK_BLUE_BG.icon" style="font-size: 35px"></i>
        </div>
      </ArkCard>`,
  }),
  args: {
    dark: true,
    shadow: true,
    blur: true,
    hover: true,
    active: true,
    disabled: false,
    title: '可视化大屏',
    desc: '数据可视化查看',
  }
};